<template>
<div class="page-container">
    <div class="toolbar">
        <el-row>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
                        <el-row style="margin-top: -20px;">
                            <el-divider content-position="center">
                                <span style="font-size:16px;font-weight:800">基本信息</span>
                            </el-divider>

                            <el-form-item label="平台ID" v-show="false" prop="id">
                                <el-input v-model="dataForm.id" placeholder="请输入"></el-input>
                            </el-form-item>
                               <el-form-item label="BD部门" prop="bdName">
                                <el-input v-model="dataForm.bdName" placeholder="请输入"></el-input>
                            </el-form-item>

                            <el-form-item label="BD编码" prop="bdCode">
                              <el-input v-model="dataForm.bdCode" placeholder="请输入"></el-input>
                               <!-- <el-select clearable placeholder="选择BD编码" v-model="dataForm.bdCode">
                                <el-option v-for="(item,index) in deptList" :key="index" :label="item.code"
                                :value="item.code"></el-option>
                               </el-select> -->
                            </el-form-item>
                            <!-- <el-form-item label="平台编码" prop="code">
                                <el-input v-model="dataForm.code" placeholder="请输入"></el-input>
                            </el-form-item> -->
                            <el-form-item label="平台" prop="name">
                                <el-input v-model="dataForm.name" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人名称" prop="chargerName">
                                <el-input v-model="dataForm.chargerName" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人邮箱" prop="chargerEmail">
                                <el-input v-model="dataForm.chargerEmail" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="负责人电话" prop="chargerPhone">
                                <el-input v-model="dataForm.chargerPhone" placeholder="请输入"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="总积分" prop="total">
                                <el-input-number v-model="dataForm.total" placeholder="请输入" type="number" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="可用积分" prop="available">
                                <el-input-number v-model="dataForm.available" placeholder="请输入" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="冻结积分" prop="frozen">
                                <el-input-number v-model="dataForm.frozen" placeholder="请输入" :min="0"></el-input-number>
                            </el-form-item> -->
                            <el-form-item label="旗下用户积分" prop="userPointLimit">
                                <el-input-number v-model="dataForm.userPointLimit" placeholder="请输入" :min="0"></el-input-number>
                            </el-form-item>
                            <el-form-item label="积分预警比例" prop="userPointWarning">
                                <el-input v-model="dataForm.userPointWarning" placeholder="请输入" :min="0" :max="100"></el-input>
                            </el-form-item><span>%</span>
                            <el-form-item label="申请原因" prop="applierReason">
                             <el-input v-model="dataForm.applierReason" style="width: 30rem;" type="textarea" auto-complete="off"   maxlength="150"  show-word-limit></el-input>
                            </el-form-item>
                            <el-form-item label="开始日期" prop="startTime">
                                <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请选择开始日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束日期" prop="endTime">
                                <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请选择结束日期"></el-date-picker>
                            </el-form-item>
                             <el-form-item label="上传附件"  prop="fileUrls">
                            <el-upload :action="imgUpload" list-type="picture-card" :on-success="handlePicSuccess" v-model="dataForm.fileUrls" :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-remove="handlePicRemove" :limit="picLimit" style="float:left" ref="pic_upload" :file-list="picList">
                              <i class="el-icon-plus"></i>
                            </el-upload>
                          </el-form-item>
                            <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList" prop="fileUrls">
                                <el-button v-model="dataForm.fileUrls" size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload> -->
                        </el-row>
                    </el-form>
                    <div class="tool-wrap">
                        <div class="left-area">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
                                <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                            </el-button-group>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";

//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
  },

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      searchSize: "mini",
      deptList: [],
      fileList: [],
      picLimit: 1, //图片最多可以添加多少个
      picList: [],
      imgUpload: this.utils.imgUploadUrl,
      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        deptId: null,
        bdCode: null,
        code: null,
        name: null,
        chargerName: null,
        chargerEmail: null,
        chargerPhone: null,
        total: null,
        available: null,
        frozen: null,
        userPointLimit: null,
        userPointWarning: null,
        applierId: null,
        applierReason: null,
        auditorId: null,
        auditReason: null,
        createTime: null,
        updateTime: null,
        creator: null,
        updater: null,
        deleteFlag: null,
        sts: null,
        startTime: null,
        endTime: null,
        fileUrls: null
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
      dataFormRules: {
        /* id:[
    //2.2 数据初始化区
    data() {
        return {

            //2.2.1 公共数据初始化
            searchSize: 'mini',
            deptList:[],
            fileList:[],
            picLimit: 1, //图片最多可以添加多少个
            picList:[],
            imgUpload: this.utils.imgUploadUrl,
            // 2.2.2 form 表单数据初始化
            dataForm: {
                id: null,
                deptId: null,
                bdCode: null,
                code: null,
                name: null,
                chargerName: null,
                chargerEmail: null,
                chargerPhone: null,
                total: null,
                available: null,
                frozen: null,
                userPointLimit: null,
                userPointWarning: null,
                applierId: null,
                applyReason: null,
                auditorId: null,
                auditReason: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                deleteFlag: null,
                sts: null,
                startTime: null,
                endTime: null,
                fileUrls: null,
                bdName:null
            },
            //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
            dataFormRules: {
                /* id:[
                 { required: true, message: "请输入平台ID", trigger: "blur" },
                 { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
                 ], */
                deptId: [{
                        required: true,
                        message: "请输入部门ID",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                bdCode: [{
                        required: true,
                        message: "请输入部门编码",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个数字",
                        trigger: "blur"
                    },
                ],
                bdName: [{
                        required: true,
                        message: "请输入BD部门",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个数字",
                        trigger: "blur"
                    },
                ],

                code: [{
                        required: true,
                        message: "请输入平台编码",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                name: [{
                        required: true,
                        message: "请输入平台简称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                chargerName: [{
                        required: true,
                        message: "请输入负责人名称",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                chargerEmail: [{
                        required: true,
                        message: "请输入负责人邮箱",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 20,
                        message: "长度在 3 到 20 个字符",
                        trigger: "blur"
                    },
                    {
                        type: 'email',
                        message: '请输入正确的负责人邮箱地址',
                        trigger: ['blur']
                    },
                ],
                chargerPhone: [{
                        required: true,
                        message: "请输入负责人电话",
                        trigger: "blur"
                    },
                    {
                        min: 11,
                        max: 11,
                        message: "长度在11个字符",
                        trigger: "blur"
                    },
                    {
                        pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    },
                ],
                total: [{
                        required: true,
                        message: "请输入总积分",
                        trigger: "blur"
                    }
                ],
                available: [{
                        required: true,
                        message: "请输入可用积分",
                        trigger: "blur"
                    }
                ],
                frozen: [{
                        required: true,
                        message: "请输入冻结积分",
                        trigger: "blur"
                    }
                ],
                userPointLimit: [{
                        required: true,
                        message: "请输入旗下用户积分额度值",
                        trigger: "blur"
                    }
                ],
                userPointWarning: [{
                        required: true,
                        message: "请输入旗下积分预警值,百分比",
                        trigger: "blur"
                    }
                ],
                applierId: [{
                        required: true,
                        message: "请输入申请人ID",
                        trigger: "blur"
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个数字",
                        trigger: "blur"
                    },
                ],
                applyReason: [{
                        required: true,
                        message: "请输入申请原因",
                        trigger: "blur"
                    },
                    // {
                    //     min: 3,
                    //     max: 20,
                    //     message: "长度在 3 到 20 个字符",
                    //     trigger: "blur"
                    // },
                ],
                startTime: [{
                    required: true,
                    message: "请选择开始日期",
                    trigger: "blur"
                }, ],
                endTime: [{
                    required: true,
                    message: "请选择结束日期",
                    trigger: "blur"
                }, ]
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;

        } //return 完结;
    }, //data()方法 完结;
    watch: {
        'dataForm.fileUrls'(newVal, OblVal) {
            if (newVal != null || newVal != undefined) {
                let obj = new Object();
                obj.url = newVal;
                this.picList.push(obj);
            }
        },
    },

  watch: {
    "dataForm.fileUrls"(newVal, OblVal) {
      if (newVal != null || newVal != undefined) {
        let obj = new Object();
        obj.url = newVal;
        this.picList.push(obj);
      }
    }
  },

  //2.3 Vue 方法区
  methods: {
    handlePicRemove(file, picList) {
      if (picList && picList.length == 0) {
        this.dataForm.fileUrls = null;
      }
      this.fileUrls = picList;
    },
    //文件上传数量限制
    handleExceed: function() {
      this.$alert("每个图片框最多上传1张图片", "警告", {
        confirmButtonText: "确定"
      });
    },

    handlePicSuccess: function(res, file) {
      if (res.code == "0000") {
        this.dataForm.fileUrls = res.data.imgUrl;
        let imgUrl = {};
        imgUrl.url = res.data.imgUrl;
      }
    },
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours(); //得到日期
      var minute = now.getMinutes(); //得到日期
      var second = now.getSeconds(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var endYear = year + 10;
      var endTime =
        endYear +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second; /*   this.$set(this.dataForm, "startTime", startTime);
      this.$set(this.dataForm, "endTime", endTime); */ //dataForm.startTime
      let this_ = this;
      this_.dataForm.startTime = now;
      this_.dataForm.endTime = endTime;
    },
    //2.3.1 公共方法区
    handleChange: function() {
      // 按钮操作处理函数
      this.$emit("change", {});
    },

    //获取部门信息
    getDeptName() {
      let this_ = this;
      //let param = this.dataForm;
      this.utils.request.DepartmentNameInquiry({}, function(res) {
        this_.deptList = res.data;
        console.log(this_.deptList);
      });
    },

    //2.请求列表数据
    getDetail() {
      let this_ = this;
      if (
        this.$route.query != null &&
        this.$route.query.id != null &&
        this.$route.query.id != "" &&
        this.$route.query.id != "null" &&
        this.$route.query.id != "undefined"
      ) {
        let params = {};
        params.id = this.$route.query.id;
        if (this.$route.query.activeName == "second") {
          this.utils.request.getConfPlatformApplyDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + data.msg,
                type: "error"
              });
            }
          });
        } else {
           this.utils.request.getConfPlatformDetail(params, function(res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + data.msg,
                type: "error"
              });
            }
          });

        }
      } else {
        this.getNowTime();
      }
    },

        submitForm: function () {
            let this_ = this;
            this_.$refs.dataForm.validate(valid => {
                if (valid) {
                    if (this_.dataForm.startTime > this_.dataForm.endTime) {
                        this_.$message({
                            message: "结束日期:" + this_.dataForm.endTime.toLocaleString() + "不能小于开始日期:" + this_.dataForm.startTime.toLocaleString(),
                            type: "error"
                        });
                        return;
                    }
                    var date = new Date();
                    if (this_.dataForm.startTime < date) {
                        this_.$message({
                            message: "请选择正确的开始日期",
                            type: "error"
                        });
                        return;
                    }
                    if((this_.dataForm.userPointWarning / 100 ) > this_.dataForm.userPointLimit){
                        this_.$message({
                            message: "旗下积分预警值不能大于旗下用户积分额度值",
                            type: "error"
                        });
                        return;
                    }
                    this_.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this_.editLoading = true;
                        let params = this.dataForm;
                        debugger
                        if(this.$route.query.activeName == "second"){
                           this_.utils.request.saveConfPlatformApply(params, function (res) {
                            if (res.code === "0000") {
                                this_.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                            } else {
                                this_.$message({
                                    message: "操作失败",
                                    type: "error"
                                });
                            }
                        });
                        this_.$router.go(-1);
                        }else {
                            this_.utils.request.saveConfPlatform(params, function (res) {
                            if (res.code === "0000") {
                                this_.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                            } else {
                                this_.$message({
                                    message: "操作失败",
                                    type: "error"
                                });
                            }
                        });
                        this_.$router.go(-1);

                        }

                    });
                }
            });
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    /*图片预览*/
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*图片移除*/
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    back() {
      this.$router.go(-1);
    }
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.getDetail();
    this.getDeptName();
  }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
